<template>
  <!-- 除酸空气净化机控制页面：结构与样式严格对齐需求说明 -->
  <div class="acidmachine-page">
    <!-- 顶部区域：标题 + 设备选择 + 离线状态 + 更新时间 -->
    <div class="topbar">
      <div class="left">
        <span class="title">除酸空气净化机</span>
        <!-- 设备下拉从后端获取 alias 列表；选中后根据 opStatus 显示在线/离线 -->
        <el-select v-model="selectedDevice" size="small" class="device-select" @change="handleDeviceChange" placeholder="请选择设备">
          <el-option v-for="item in deviceOptions" :key="item" :label="item" :value="item" />
        </el-select>
        <el-tag v-if="isOffline" type="danger" class="offline-tag">离线</el-tag>
        <el-tag v-else type="success" class="online-tag">在线</el-tag>
      </div>
      <div class="right">
        <span class="update-time">更新时间 {{ lastUpdateTime }}</span>
      </div>
    </div>

    <!-- 设备控制区域：设备状态 + 运行模式 -->
    <div class="control-panel">
      <div class="control-group">
        <span class="group-label">设备状态</span>
        <div class="segmented">
          <el-button :type="deviceStatus === 'on' ? 'primary' : 'default'" size="small" @click="setDeviceStatus('on')">开机</el-button>
          <el-button :type="deviceStatus === 'off' ? 'primary' : 'default'" size="small" @click="setDeviceStatus('off')">关机</el-button>
        </div>
      </div>
      <div class="control-group">
        <span class="group-label">运行模式</span>
        <div class="segmented">
          <el-button :type="runMode === 'auto' ? 'primary' : 'default'" size="small" @click="setRunMode('auto')">自动</el-button>
          <el-button :type="runMode === 'manual' ? 'primary' : 'default'" size="small" @click="setRunMode('manual')">手动</el-button>
          <el-button :type="runMode === 'timing' ? 'primary' : 'default'" size="small" @click="setRunMode('timing')">定时</el-button>
        </div>
      </div>
    </div>

    <!-- 功能模块区域：紫外灯 / 光氢 / 负离子 / 风速 -->
    <div class="feature-modules">
      <div class="feature" v-for="(f, i) in features" :key="i">
        <i :class="f.icon" class="feature-icon"></i>
        <span class="feature-name">{{ f.name }}</span>
      </div>
    </div>

    <!-- 环境数据展示区域：统一卡片样式，数值突出显示 -->
    <el-row :gutter="12" class="env-row">
      <el-col v-for="(m, idx) in envMetrics" :key="idx" :span="3">
        <div class="env-card">
          <div class="env-name">{{ m.name }}</div>
          <div class="env-value">{{ m.value }}<span class="env-unit"> {{ m.unit }}</span></div>
        </div>
      </el-col>
    </el-row>

    <!-- 运行日志区域：表格 10 条示例数据 -->
    <div class="logs-section">
      <div class="section-title">运行日志</div>
      <el-table :data="runLogs" class="log-table" height="360" stripe>
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="message" label="内容" />
      </el-table>
    </div>
  </div>
</template>

<script>
// 页面脚本说明：
// - 顶部区域包含设备选择与离线状态，右侧显示动态更新时间（每秒刷新）。
// - 控制区域使用分段按钮实现“开机/关机”“自动/手动/定时”切换，高亮为蓝色。
// - 功能模块与环境数据卡片按横向等分排列，数据支持后续实时更新对接。
import { listAcidDevices, getDeviceLogs } from '@/api/archives/acidmachine'
export default {
  name: 'AcidMachineMonitor',
  data() {
    return {
      // 设备选择相关（通过后端接口加载）
      deviceOptions: [], // 下拉展示的别名 alias 列表
      deviceMap: {},     // alias -> 设备对象映射，便于根据选中项获取 opStatus 等
      selectedDevice: '',

      // 顶部更新时间（动态）
      lastUpdateTime: '2025-11-10 22:45:33',
      updateTimer: null,

      // 设备状态与运行模式（默认：关机、自动）
      deviceStatus: 'off',
      runMode: 'auto',

      // 功能模块（图标使用 Element-UI 内置图标做占位，统一蓝色样式）
      features: [
        { name: '紫外灯', icon: 'el-icon-magic-stick' },
        { name: '光氢', icon: 'el-icon-sunny' },
        { name: '负离子', icon: 'el-icon-connection' },
        { name: '风速', icon: 'el-icon-wind-power' }
      ],

      // 环境数据卡片（初始数值为 0）
      envMetrics: [
        { name: '温度', value: 0, unit: '℃' },
        { name: '湿度', value: 0, unit: '%RH' },
        { name: 'PM2.5', value: 0, unit: 'μg/m³' },
        { name: 'PM10', value: 0, unit: 'μg/m³' },
        { name: 'CO₂', value: 0, unit: 'μg/m³' },
        { name: 'TVOC', value: 0, unit: 'μg/m³' },
        { name: 'CH₂O', value: 0, unit: 'μg/m³' },
        { name: '空气质量', value: 0, unit: '' }
      ],

      // 运行日志（10 条示例数据）
      runLogs: [
        { time: '2025-11-10 22:30:01', message: '设备连接断开，状态：离线' },
        { time: '2025-11-10 22:31:12', message: '尝试重连设备...' },
        { time: '2025-11-10 22:33:45', message: '重连失败，等待下一次重试' },
        { time: '2025-11-10 22:35:00', message: '收到心跳异常告警' },
        { time: '2025-11-10 22:37:28', message: '远程控制指令：关机' },
        { time: '2025-11-10 22:38:52', message: '模式设定为 自动' },
        { time: '2025-11-10 22:40:03', message: '采样频率调整为 30s' },
        { time: '2025-11-10 22:41:36', message: '传感器读取：温度=0℃ 湿度=0%RH' },
        { time: '2025-11-10 22:43:18', message: '参数保存成功' },
        { time: '2025-11-10 22:45:20', message: '页面加载完成，等待数据更新' }
      ]
    }
  },
  computed: {
    // 是否离线：根据选中设备对象的 opStatus 字段判断（约定 opStatus === '0' 为在线）
    isOffline() {
      const info = this.deviceMap[this.selectedDevice]
      return info ? String(info.opStatus) !== '0' : true
    }
  },
  mounted() {
    // 动态更新时间：每秒刷新为当前时间
    this.updateTimer = setInterval(() => {
      const d = new Date()
      const yyyy = d.getFullYear()
      const MM = String(d.getMonth() + 1).padStart(2, '0')
      const DD = String(d.getDate()).padStart(2, '0')
      const hh = String(d.getHours()).padStart(2, '0')
      const mm = String(d.getMinutes()).padStart(2, '0')
      const ss = String(d.getSeconds()).padStart(2, '0')
      this.lastUpdateTime = `${yyyy}-${MM}-${DD} ${hh}:${mm}:${ss}`
    }, 1000)

    // 初始化加载设备列表（顶部与设备控制区域数据来源）
    this.fetchDevices()
  },
  beforeDestroy() {
    if (this.updateTimer) clearInterval(this.updateTimer)
  },
  methods: {
    // 设备切换：根据选中设备初始化设备状态，并刷新运行日志（联动参数）
    handleDeviceChange() {
      const info = this.deviceMap[this.selectedDevice]
      if (info) {
        // 根据 opStatus 推断设备状态：0=在线/开机，其余=离线/关机
        this.deviceStatus = String(info.opStatus) === '0' ? 'on' : 'off'
        // 刷新更新时间
        this.updateLastUpdateTime()
        // 刷新运行日志（后端接口）
        this.fetchDeviceLogs(info)
      }
      this.$message.info(`当前设备：${this.selectedDevice}`)
    },
    // 获取当前时间字符串（YYYY-MM-DD HH:mm:ss）
    getNowTime() {
      const d = new Date()
      const yyyy = d.getFullYear()
      const MM = String(d.getMonth() + 1).padStart(2, '0')
      const DD = String(d.getDate()).padStart(2, '0')
      const hh = String(d.getHours()).padStart(2, '0')
      const mm = String(d.getMinutes()).padStart(2, '0')
      const ss = String(d.getSeconds()).padStart(2, '0')
      return `${yyyy}-${MM}-${DD} ${hh}:${mm}:${ss}`
    },
    // 刷新顶部“更新时间”
    updateLastUpdateTime() {
      this.lastUpdateTime = this.getNowTime()
    },
    // 追加一条运行日志（保留最近 100 条）
    pushLog(message) {
      this.runLogs.unshift({ time: this.getNowTime(), message })
      if (this.runLogs.length > 100) this.runLogs.pop()
    },
    // 模拟生成设备对应的环境数据（后续可替换为真实设备数据接口）
    simulateDeviceData(alias) {
      // 随机函数：生成指定区间的整数或一位小数
      const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
      const randFloat1 = (min, max) => Number((Math.random() * (max - min) + min).toFixed(1))

      const simulated = [
        { name: '温度', value: randFloat1(16, 28), unit: '℃' },
        { name: '湿度', value: randInt(30, 70), unit: '%RH' },
        { name: 'PM2.5', value: randInt(5, 80), unit: 'μg/m³' },
        { name: 'PM10', value: randInt(10, 120), unit: 'μg/m³' },
        { name: 'CO₂', value: randInt(400, 1200), unit: 'μg/m³' },
        { name: 'TVOC', value: randInt(0, 500), unit: 'μg/m³' },
        { name: 'CH₂O', value: randFloat1(0.00, 0.10), unit: 'μg/m³' },
        { name: '空气质量', value: randInt(80, 100), unit: '' }
      ]
      this.envMetrics = simulated
    },
    // 从后端接口加载设备列表数据
    async fetchDevices() {
      try {
        // 发起请求：/acidmachine/device/manage
        const res = await listAcidDevices()
        // 期望返回结构：{ code: 200 | '200', msg: '请求成功', data: [ ... ], totalSize }
        if ((res.code === 200 || String(res.code) === '200') && Array.isArray(res.data)) {
          // 仅过滤“除酸净化一体机”设备，依据 deviceTypeCode === '0C' 或设备类型字段匹配
          const acidList = res.data.filter(d => String(d.deviceTypeCode) === '0C' || d.deviceType === '除酸一体机' || (d.deviceName || '').includes('除酸净化'))
          // 构造 alias 列表与映射表（只使用除酸设备）
          this.deviceOptions = acidList.map(d => d.alias)
          this.deviceMap = acidList.reduce((acc, cur) => { acc[cur.alias] = cur; return acc }, {})

          // 默认选中第一个设备
          if (this.deviceOptions.length > 0) {
            this.selectedDevice = this.deviceOptions[0]
            const info = this.deviceMap[this.selectedDevice]
            this.deviceStatus = info && String(info.opStatus) === '0' ? 'on' : 'off'
            // 初始化加载运行日志（后端接口）
            await this.fetchDeviceLogs(info)
          } else {
            this.selectedDevice = ''
            this.$message.warning('未获取到除酸净化一体机设备')
          }
          // 刷新“更新时间”为当前
          const d = new Date()
          const yyyy = d.getFullYear()
          const MM = String(d.getMonth() + 1).padStart(2, '0')
          const DD = String(d.getDate()).padStart(2, '0')
          const hh = String(d.getHours()).padStart(2, '0')
          const mm = String(d.getMinutes()).padStart(2, '0')
          const ss = String(d.getSeconds()).padStart(2, '0')
          this.lastUpdateTime = `${yyyy}-${MM}-${DD} ${hh}:${mm}:${ss}`
        } else {
          this.$message.error(res.msg || '设备列表加载失败')
        }
      } catch (e) {
        console.error('设备列表加载异常', e)
        this.$message.error('设备列表加载异常')
      }
    },
    // 拉取设备运行日志：POST /acidmachine/device/transmitter/logs
    async fetchDeviceLogs(info) {
      try {
        const req = this.buildDeviceReq(info)
        const res = await getDeviceLogs(req)
        // 通用响应兼容：可能为 {code, msg, data: []} 或 {code, msg, data: { list: [] }}
        if (res && (res.code === 200 || String(res.code) === '200')) {
          const raw = Array.isArray(res.data) ? res.data : (res.data && res.data.list ? res.data.list : [])
          this.runLogs = this.normalizeLogs(raw)
        } else {
          this.$message.error(res?.msg || '运行日志加载失败')
        }
      } catch (e) {
        console.error('运行日志加载异常', e)
        this.$message.error('运行日志加载异常')
      }
    },
    // 构造 DeviceReqDTO 参数对象（与后端接口联动）
    buildDeviceReq(info) {
      // 优先使用已存在字段；若不存在，可从 ident 解析 deviceTypeCode/deviceAddrCode（格式：X-X-<type>-<addr>）
      const parseFromIdent = (ident = '') => {
        const parts = String(ident).split('-')
        return {
          type: parts[2] || '',
          addr: parts[3] || ''
        }
      }
      const parsed = parseFromIdent(info.ident)
      return {
        storeId: info.storeId,
        deviceTypeCode: info.deviceTypeCode || parsed.type,
        deviceAddrCode: info.deviceAddrCode || parsed.addr,
        termId: info.termId,
        storeCode: info.storeCode
      }
    },
    // 将后端返回的日志数组归一化为 { time, message } 结构，便于表格展示
    normalizeLogs(arr) {
      if (!Array.isArray(arr)) return []
      // 映射后端结构：createTime -> time，deviceOpLog -> message；timeStamp 用于排序
      const mapped = arr.map((it) => ({
        time: it.createTime || it.time || it.logTime || this.getNowTime(),
        message: it.deviceOpLog || it.message || it.content || it.remark || it.msg || JSON.stringify(it),
        timeStamp: it.timeStamp || it.ts || Date.parse(it.createTime || '') || 0
      }))
      // 按时间戳倒序，仅保留最近 10 条
      return mapped
        .sort((a, b) => Number(b.timeStamp) - Number(a.timeStamp))
        .slice(0, 10)
    },
    // 设置设备状态（开/关）
    setDeviceStatus(status) {
      this.deviceStatus = status
    },
    // 设置运行模式（自动/手动/定时）
    setRunMode(mode) {
      this.runMode = mode
    }
  }
}
</script>

<style scoped>
/* 页面整体与主题色：浅蓝 + 白色；蓝色表示选中，红色表示离线 */
.acidmachine-page {
  padding: 16px;
  background: #fff;
}

/* 顶部栏布局 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.topbar .left {
  display: flex;
  align-items: center;
}
.title {
  font-size: 18px;
  font-weight: 600;
  margin-right: 12px;
}
.device-select {
  width: 280px;
  margin-right: 10px;
}
.offline-tag {
  border-color: #ff4d4f;
  background: #ffeded;
  color: #f5222d;
}
.online-tag {
  border-color: #67C23A;
  background: #EDFFF3;
  color: #67C23A;
}
.update-time {
  color: #606266;
}

/* 控制面板：分段按钮高亮为蓝色 */
.control-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  margin-bottom: 16px;
}
.control-group {
  display: flex;
  align-items: center;
}
.group-label {
  color: #606266;
  margin-right: 12px;
}
.segmented .el-button.is-disabled {
  opacity: 0.6;
}

/* 功能模块：横向等分排列 */
.feature-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f7fbff;
  border: 1px solid #e6f2ff;
  border-radius: 6px;
}
.feature-icon {
  font-size: 20px;
  color: #409EFF;
}
.feature-name {
  color: #303133;
  font-weight: 500;
}

/* 环境数据卡片：数值强调 */
.env-row {
  margin-bottom: 16px;
}
.env-card {
  background: #f7fbff;
  border: 1px solid #e6f2ff;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
}
.env-name {
  font-size: 12px;
  color: #606266;
}
.env-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #409EFF;
}
.env-unit {
  margin-left: 4px;
  font-size: 12px;
  color: #606266;
}

/* 日志区域：表头浅灰色，内容整齐 */
.logs-section {
  margin-top: 4px;
}
.section-title {
  font-weight: 600;
  margin-bottom: 8px;
}
/deep/ .log-table .el-table__header-wrapper th {
  background: #f5f7fa !important;
}
</style>